<!-- 终端状态 -->
<template>
  <div class="dashboard-editor-container">
    <el-row style="background: #fff; padding: 16px 16px 0;">
      <div>
        <el-tag type="success" effect="dark" size="medium" style="margin-right:20px;">在线终端数量 {{online}}</el-tag>
        <el-tag type="info" effect="dark" size="medium">离线终端数量 {{offline}}</el-tag>
      </div>
      <div>
        <!-- <el-table border :data="tableData" row-key="id"  style="width: 100%; margin: 15px 0">
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column prop="Name" label="终端用户" align="left"></el-table-column>
            
            <el-table-column prop="Status" label="在线状态" align="left">
              <template slot-scope="scope">
                <span v-if="scope.row.Status===1 ?'在线':'离线'"></span>
              </template>
            </el-table-column>
            <el-table-column prop="Mobile" label="联系电话" align="left"></el-table-column>
            <el-table-column prop="Phone" label="手机号码" align="left"></el-table-column>
            <el-table-column prop="EMail" label="邮箱" align="left"></el-table-column>
            <el-table-column prop="LoginTime" label="在线时长" align="left"></el-table-column>
            <el-table-column prop="ClientIP" label="终端地址" align="left"></el-table-column>
            <el-table-column prop="Version" label="版本号" align="left"></el-table-column>
            <el-table-column prop="CPUPerent" label="CPU使用率" align="left"></el-table-column>
            <el-table-column prop="MemPercent" label="内存使用率" align="left"></el-table-column>
            <el-table-column prop="UserID" label="登录账号" align="left"></el-table-column>
            <el-table-column prop="OsInfo" label="操作系统" align="left"></el-table-column>
            <el-table-column prop="ComputerName" label="计算机名称" align="left"></el-table-column>
        </el-table> -->
        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px; margin: 15px 0" row-key="depart" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column prop="depart" label="终端用户" align="left"></el-table-column>
            <el-table-column prop="Status" label="在线状态" align="left" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.Status===1" style="color:#67C23A">在线</span>
                <span v-if="scope.row.Status===0" style="color:#909399">离线</span>
                <span v-if="scope.row.Status===2" style="color:#909399">离线</span>
              </template>
            </el-table-column>
            <el-table-column prop="Mobile" label="联系电话" align="left" width="110"></el-table-column>
            <!-- <el-table-column prop="EMail" label="邮箱" align="left"></el-table-column> -->
            <el-table-column prop="LoginTime" label="上线时间" align="left" width="160">
              <template slot-scope="scope">
                <span>{{ (scope.row.Status===0 ||  scope.row.Status===2) ? '---' : scope.row.LoginTime}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="KeepAliveTime" label="在线时长" align="left" width="140">
              <template slot-scope="scope">
                <span>{{ (scope.row.Status===0 ||  scope.row.Status===2) ? '---' : scope.row.KeepAliveTime}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="ClientIP" label="终端地址" align="left" width="150">
              <template slot-scope="scope">
                <span>{{ (scope.row.Status===0 ||  scope.row.Status===2) ? '---' : scope.row.ClientIP}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="Version" label="版本号" align="left" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ (scope.row.Status===0 ||  scope.row.Status===2) ? '---' : scope.row.Version}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="DiskPercent" label="磁盘" align="left" width="60">
              <template slot-scope="scope">
                <span v-if="scope.row.DiskPercent!=null || scope.row.DiskPercent!=undefined">{{ (scope.row.Status===0 ||  scope.row.Status===2) ? '---' : scope.row.DiskPercent + ' %'}}</span>
                <span v-if="scope.row.DiskPercent===null || scope.row.DiskPercent===undefined"></span>
              </template>
            </el-table-column>
            <el-table-column prop="CPUPerent" label="CPU" align="left" width="60">
              <template slot-scope="scope">
                <span v-if="scope.row.CPUPerent!=null || scope.row.CPUPerent!=undefined">{{ (scope.row.Status===0 ||  scope.row.Status===2) ? '---' : scope.row.CPUPerent + ' %'}}</span>
                <span v-if="scope.row.CPUPerent===null || scope.row.CPUPerent===undefined"></span>
              </template>
            </el-table-column>
            <el-table-column prop="MemPercent" label="内存" align="left" width="60">
              <template slot-scope="scope">
                <span v-if="scope.row.MemPercent!=null || scope.row.MemPercent!=undefined">{{ (scope.row.Status===0 ||  scope.row.Status===2) ? '---' : scope.row.MemPercent + ' %'}}</span>
                <span v-if="scope.row.MemPercent===null || scope.row.MemPercent===undefined"></span>
              </template>
            </el-table-column>
            <el-table-column prop="WinAccount" label="登录账号" align="left" width="110">
              <template slot-scope="scope">
                <span>{{ (scope.row.Status===0 ||  scope.row.Status===2) ? '---' : scope.row.WinAccount}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="OsInfo" label="操作系统" align="left" width="150">
              <template slot-scope="scope">
                <span>{{ (scope.row.Status===0 ||  scope.row.Status===2) ? '---' : scope.row.OsInfo}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="ComputerName" label="计算机名称" align="left" width="160">
              <template slot-scope="scope">
                <span>{{ (scope.row.Status===0 ||  scope.row.Status===2) ? '---' : scope.row.ComputerName}}</span>
              </template>
            </el-table-column>
        </el-table>
      </div>
    </el-row>
  </div>
</template>

<script>
import { connrequest } from "@/api/firstPage";
// import { filter } from 'mock/article';
import { parseTime } from "@/utils/index.js";
export default {
    data(){
        return{
            tableData:[],
            online:0,
            offline:0
        }
    },
    created(){
      this.getData();
    },
    methods:{
      async getData(){
        const res = await connrequest('GetEmployeeStatus');
        // this.tableData = res.Data;
        res.Data.map(item=>{
          if (item.Status === 1) {
            this.online++
          }else{
            this.offline++
          }
          item.LoginTime = parseTime(item.LoginTime);
          let d = Math.floor(item.KeepAliveTime / 3600 / 24);
          let h = Math.floor((item.KeepAliveTime  % 86400) / 3600);
          var m = Math.floor(((item.KeepAliveTime % 86400) % 3600) / 60);
          item.KeepAliveTime = `${d < 1 ? '' : d}${d < 1 ? '' : '天'} ${h}小时 ${m}分钟`;
          this.tableData.push({
            depart:item.Department,
            children:[{...item}]
          })
          this.tableData.map(item=>{
            item.children.map(newitem=>{
              newitem.depart = newitem.Name
            })
          })
        })
        console.log(this.tableData);
      }
    }
}
</script>

<style scoped lang='scss'>
/* @import url(); 引入css类 */
.top{
  display:flex;
  justify-content:space-between;
  align-items: center;
}
// /* cascader 隐藏单选样式 start */
// 	::v-deep .cascader .el-cascader-panel .el-radio {
// 		display: none !important;
// 	}
</style>
<style>
.el-cascader-panel .el-radio {
  display: none;
}
</style>